<template>
  <div class="index2">
    <barChartVue :rowdata="data1" :title="'载波类型'" :title1="'澄清比例'"></barChartVue>
    <barChartVue :rowdata="data2" :title="'调制方式'" :title1="'澄清比例'"></barChartVue>
    <barChartVue :rowdata="data3" :title="'译码类型'" :title1="'澄清比例'"></barChartVue>
    <barChartVue :rowdata="data4" :title="'扰码类型'" :title1="'澄清比例'"></barChartVue>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import barChartVue from "./charts/barChart.vue"
export default defineComponent({
  components: { barChartVue },
  setup() {
    let data1 = [
      // ['NONE', 'UNKNOWN', 'IBS',"DVB-S2","EDMAC","IDR","DVB-S"],
      ["DVB-S", "IDR", "EDMAC", "DVB-S2", "IBS", "UNKNOWN", "NONE"],
      [4, 6, 7, 10, 40, 0, 45],
      [0, 0, 0, 5, 10, 30, 10],
      [0, 0, 0, 0, 0, 10, 0]
    ]
    let data2 = [
      ['32APSK', 'BPSK', 'ACM', "16APSK", "8QAM", "16QAM", "UNKNOWN", "8PSK", "QPSk"],
      [1, 2, 3, 4, 0, 0, 0, 23, 30],
      [0, 0, 0, 1, 5, 8, 10, 10, 5],
      [0, 0, 0, 0, 0, 0, 0, 0, 10]
    ]
    let data3 = [
      ['VIT', 'LDPC', 'TPC', "UNKNOWN"],
      [10, 10, 15, 10],
      [0, 0, 5, 13],
      [0, 0, 0, 2]
    ]
    let data4 = [
      ['11,9,0', '20,3,0', "16,13,8,2,0", '15,14,0', "12,9,3,2,9", "UNKNOWN"],
      [3, 7, 9, 13, 15, 7],
      [0, 0, 0, 2, 2, 12],
      [0, 0, 0, 0, 0, 2]
    ]
    return {
      data1,
      data2,
      data3,
      data4,
    }
  }
})
</script>
<style scoped>
.index2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  justify-content: space-around;
  padding: 40px 0;
  box-sizing: border-box;
}
</style>
